import 'package:flutter/material.dart';


class AlignAlignment extends StatelessWidget {
  final Alignment status;
  final String dec;

  const AlignAlignment( this.status,  this.dec) : super();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xffd81b60),
      width: 90.0,
      height: 50.0,
      child: Align(
        alignment: status,
        child: Text(
          dec,
          style: TextStyle(fontSize: 12.0, color: Color(0xffffffff)),
        ),
      ),
    );
  }
}

class AlignFactor extends StatelessWidget {
  final Alignment status;
  final double wFactor;
  final double hFactor;
  final String dec;

  const AlignFactor( this.status,  this.wFactor,
       this.hFactor,  this.dec)
      : super();

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
      color: Color(0xffd81b60),
      child: Align(
        alignment: status,
        widthFactor: wFactor,
        heightFactor: hFactor,
        child: Container(
          color: Color(0xfff06292),
          width: 100.0,
          height: 50.0,
          child: Text(
            dec,
            style: TextStyle(color: Color(0xffffffff)),
          ),
        ),
      ),
    );
  }
}


class AlignPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return AlignPageState();
  }
}

class AlignPageState extends State<AlignPage> {

  @override
  void initState() {

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Align Example"),
        ),
        body: Column(
      children: <Widget>[
        SizedBox(height: 10.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            AlignAlignment(Alignment.center, 'center'),
            AlignAlignment(Alignment.centerLeft, 'centerLeft'),
          ],
        ),
        SizedBox(height: 10.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            AlignAlignment(Alignment.centerRight, 'centerRight'),
            AlignAlignment(Alignment.bottomCenter, 'btCenter'),
            AlignAlignment(Alignment.topCenter, 'topCenter'),
          ],
        ),
        SizedBox(height: 10.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            AlignAlignment(Alignment.topLeft, 'topLeft'),
            AlignAlignment(Alignment.topRight, 'topRight'),
            AlignAlignment(Alignment.bottomLeft, 'bottomLeft'),
          ],
        ),
        SizedBox(height: 10.0),
        Container(
          margin: EdgeInsets.only(top: 20.0, bottom: 20.0),
          color: Color(0xffe91e63),
          child: Align(
            alignment: Alignment.topLeft,
            child: Text(
              "Align",
              style: TextStyle(color: Color(0xffffffff)),
            ),
          ),
        ),
        AlignFactor(Alignment.topLeft, 2.0, 2.0, 'topleft'),
        AlignFactor(Alignment.topRight, null, null, 'topleft'),
        AlignFactor(Alignment.center, null, null, 'center'),
        AlignFactor(Alignment.bottomLeft, null, null, 'bottomLeft'),
      ],
    )
      );
  }
}